<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="header.html :: commonHead"></head>

<body>
<header th:replace="header.html :: pageHeader"></header>
<main role="main">
    <div class="container bg-light py-3 px-lg-5 py-lg-5">


        <p></p>
        <p>说明，此页面为演示标签路由/金丝雀发布功能使用，调用结果显示最近的 1000 次调用中，分别被路由到了服务提供者的哪些 IP</p>
        <p>点击"开启流量调用"后，frontend 应用将不停地调用 cartservice 和 productservice</p>
        <p>点击"停止流量调用"后，流量调用被停止，同时清空数据</p>
        <p>调用参数分别表示传递的参数</p>
        <p> 其中 Spring Cloud 调用对应的是 productservice 的 /getIp 这个 URL，用户名和年龄分别为 name 和 age 。</p>
        <p> 其中 Dubbo 调用对应的是 cartservice 的 CartDAO 接口的 String getRemoteIp(String name, int age) 方法，用户名和年龄分别为 name 和 age
            。</p>

        <h1>流量开关</h1>
        <p></p>
        <p></p>
        <p></p>
        <div class="row">
            <div class="col-md-6">
                <a th:href="@{/router/begin}">
                    <button type="button" class="btn">开启流量调用</button>
                </a>
                <div th:if="${message}" th:text="${message}" th:class="${'alert' + alertClass}"
                     style="padding-left: 5px; padding-top:10px"></div>
            </div>
            <div class="col-md-6">
                <a th:href="@{/router/stop}">
                    <button type="button" class="btn">停止流量调用</button>
                </a>
                <div th:if="${message2}" th:text="${message2}" th:class="${'alert' + alertClass2}"
                     style="padding-left: 5px; padding-top:10px"></div>
            </div>

        </div>
        <p></p>
        <p></p>
        <p></p>

        <div class="row">
            <div class="col-md-6">
                <h1>Spring Cloud 调用结果</h1>
                <p><span th:text=" '  当前用户名 :  ' + ${spring_cloud_name}"></span></p>
                <p><span th:text=" '  当前年龄 :  '  + ${spring_cloud_age}"></span></p>

                <p>调用结果</p>
                <div th:each="resultNode: ${spring_cloud_router_result}" class="col-md-6">
                    <div class="card mb-6 box-shadow">

                        <div class="card-body">
                            <h5 class="card-title" th:text="${resultNode.ip}"></h5>
                            <h5 class="card-title" th:text="${resultNode.times}"></h5>
                        </div>
                    </div>
                    <p></p>
                </div>

                <p></p>
                <p></p>
                <p></p>

                <h1>更新调用参数</h1>
                <form action="/router/update/springcloud?name={name}&age={age}" method="get">
                    <div class="form-group mb-6">
                        <label for="spring-cloud-name">用户名</label>
                        <input type="text" class="form-control col-md-4" id="spring-cloud-name" placeholder="name"
                               name="name">
                    </div>
                    <div class="form-group mb-6">
                        <label for="spring-cloud-age">年龄</label>
                        <input type="text" class="form-control col-md-4" id="spring-cloud-age" placeholder="age"
                               name="age">
                    </div>
                    <button type="submit" class="btn btn-default">更新</button>
                </form>

            </div>


            <div class="col-md-6">

                <h1>Dubbo 调用结果</h1>
                <p><span th:text=" '  当前用户名 :  ' + ${dubbo_name}"></span></p>
                <p><span th:text=" '  当前年龄 :  '  + ${dubbo_age}"></span></p>

                <p>调用结果</p>
                <div th:each="resultNode: ${dubbo_router_result}" class="col-md-6">
                    <div class="card mb-6 box-shadow">

                        <div class="card-body">
                            <h5 class="card-title" th:text="${resultNode.ip}"></h5>
                            <h5 class="card-title" th:text="${resultNode.times}"></h5>
                        </div>
                    </div>
                    <p></p>
                </div>

                <p></p>
                <p></p>
                <p></p>

                <h1>更新调用参数</h1>
                <form action="/router/update/dubbo?name={name}&age={age}" method="get">
                    <div class="form-group mb-6">
                        <label for="dubbo-name">用户名</label>
                        <input type="text" class="form-control col-md-4" id="dubbo-name" placeholder="name" name="name">
                    </div>
                    <div class="form-group mb-6">
                        <label for="dubbo-age">年龄</label>
                        <input type="text" class="form-control col-md-4" id="dubbo-age" placeholder="age" name="age">
                    </div>
                    <button type="submit" class="btn btn-default">更新</button>
                </form>

            </div>
        </div>
    </div>


</main>

<footer th:replace="footer.html :: pageFooter"></footer>
<script th:replace="footer.html :: footerScript"></script>
</body>
</html>